<template>
	<view class="header" :style="`height:${height}`">
		<view class="header_bg"></view>
		<view class="user" @click="change(data)">
			<view class="user_nickname" v-if="user.isLogin">
				{{user.info?.nickname }}
			</view>
			<view class="user_nickname" v-else>
				未登录
			</view>
			
			<view class="user_logo">
				Hey, SMIHE
			</view>
			<view class="user_device" v-if="user.isLogin">
				{{user.getNumber}}个智能设备
			</view>
		</view>

		<slot></slot>
	</view>

</template>

<script setup>
	import {
		ref,
		onMounted
	} from "vue"
	import {
		userStore
	} from "@/store/index.js"
	import tools from "@/util/tools";


	let props = defineProps({
		height: {
			type: String,
			default: "auto"
		},
		// data: {
		// 	type: Object,
		// 	default: {}
		// },
		// info: {
		// 	type: Object,
		// 	default: {}
		// }
	})

	let month = ref("")
	let day = ref("")
	let week = ref("")
	const user = userStore();

	onMounted(() => {
		createDate()
	})



	const createDate = () => {
		let date = new Date();
		let m = date.getMonth();
		let d = date.getDate();
		let w = date.getDay();
		month.value = m < 10 ? '0' + m : m;
		day.value = d < 10 ? '0' + d : d;
		let weeks = ['日', '一', '二', '三', '四', '五', '六']
		week.value = weeks[w];
	}

	const change = () => {
		if (!user.isLogin) {
			uni.$rui.route('/pages/user/login/login', {
				back: '/pages/tabbar/index/index',
				type: 'switchTab'
			})
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		position: relative;
		padding-top: 100rpx;

		.user {
			margin: 0 20rpx 40rpx;
			position: relative;
			z-index: 1;

			&_logo {
				font-weight: bold;
				font-size: 45rpx;
			}

			&_device {
				font-size: 28rpx;
				// color: var(--color);
				margin-top: 10rpx;
				color: rgba(0, 0, 0, .5);
			}

		}

		&_bg {
			&::before {
				content: "";
				display: block;
				height: 400rpx;
				width: 200rpx;
				background: var(--color);
				border-radius: 50%;
				filter: blur(150rpx);
				position: absolute;
				transform: rotate(30deg);
				top: 0;
				left: -50rpx;
			}

			&::after {
				content: "";
				display: block;
				height: 100rpx;
				width: 300rpx;
				background: var(--color);
				border-radius: 50%;
				filter: blur(80rpx);
				position: absolute;
				top: 250rpx;
				right: -50rpx;
			}
		}

	}
</style>